<template>
    <s-layout :title="`合同管理列表`" navbar="normal" leftIconColor="#333" :autoBack="false" :bgColor="state.bgColor" :tabbarshow='false' :titleStyle="{ color: '#333', fontSize: '32rpx' }">
        <view class="app" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
            <view class="background_box area" v-if="list.length">
                <!-- 行内样式 -->
                <!-- :style="{ height: 'calc(100vh - (' + (safeAreaInsets?.top + 44) + 'px) - 148rpx - 20rpx - 88rpx)' }" -->
                <scroll-view scroll-y @scrolltolower='listScrolltolower' :style="{ height: 'calc(100vh - (' + (safeAreaInsets?.top + 44) + 'px) - 90rpx)' }">
                    <view class="list_item" v-for="(item,index) of list" :key="index" @tap="jump_details(item.id)">
                        <view class="image">
                            <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/hetongguanli_icon_company@2.png`" mode="scaleToFill"/>
                        </view>
                        <view class="designation" v-if="group_id == 10">{{ item.company }}</view>
                        <view class="designation" v-if="group_id == 13">{{ item.department?.name }}</view>
                    </view>
                    <!-- 正在加载组件 -->
                    <view>
                        <s-loadmore-gather :current_page="listPage" :last_page="listlast_page" ref="loadmoreRef"></s-loadmore-gather>
                    </view>
                </scroll-view>
            </view>
            <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容"></u-empty>
        </view>
    </s-layout>
</template>

<script setup>
    import {reactive,ref} from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import sheep from '@/sheep';
    import { baseUrl } from '@/sheep/config';
    const group_id = ref()
    const userStoreValue = uni.getStorageSync('user-store');
    const userStoreObject = JSON.parse(userStoreValue)
    const state = ref({
        bgColor: '#fff',
        ids: ''
    })
    const { safeAreaInsets } = uni.getSystemInfoSync()
    const list = ref([])
    onLoad(() => {
        const userStoreValue = uni.getStorageSync('user-store');
        const userStoreObject = JSON.parse(userStoreValue)
        group_id.value = userStoreObject.userInfo.group_id
        listpagenumber.value = 1
        getContractList()
    })

    // 跳转详情
    const jump_details = (ids) => {
        sheep.$router.go('/subpackage/user/user/contract_management_details', {
            ids: ids,
        });
    }

    // 封装管理合同列表方法
    const listpagenumber = ref(1);
    const listPage = ref()
    const listlast_page = ref()
    const getContractList = async () => {
        let params = {
            page: listpagenumber.value,
        }
        if(group_id.value == 13) {
            const res = await sheep.$api.contract.getEpibolyIndex(params)
            list.value = [...list.value, ...res?.data.rows];
            listPage.value = res.data.current_page
            listlast_page.value = res.data.last_page
        } else {
            const res = await sheep.$api.contract.getContractIndex(params)
            list.value = [...list.value, ...res?.data.rows];
            listPage.value = res.data.current_page
            listlast_page.value = res.data.last_page
        }
    }

    //滚动触底
    const loadmoreRef = ref()
    const listScrolltolower = () => {
        loadmoreRef.value.PopupScrolltolower()
        if (listPage.value < listlast_page.value) {
            listpagenumber.value += 1;
        } else {
            return;
        }
        getContractList();
    };

</script>

<style lang="scss" scoped>
    .app {
        width: 100%;
        height: auto;
    }

    .area {
        width: calc(100% - 90rpx);
        margin: 0 20rpx;
    }

    .background_box {
        border-radius: 8px;
        background-color: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
        margin-top: 20rpx;
        padding: 30rpx 30rpx 40rpx 20rpx;
    }

    .list_item {
        display: flex;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 1px solid #EFEFEF;
        .image {
            display: flex;
            align-items: center;
            height: 60rpx;
            width: 60rpx;
            margin-right: 20rpx;
            margin-left: 10rpx;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .designation {
            font-family: PingFangSC;
            color: #333333;
            font-weight: 600;
            font-size: 28rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
        }
    }
    
    .placeholder {
        height: 30rpx;
    }
</style>